<template>
    <div class="article">
        <div class="left">
            <m-sidebar :data="sidebarDataMock"></m-sidebar>
        </div>
        <div class="right">
            <div class="preview">
                <MdPreview :modelValue="content" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { MdPreview } from 'md-editor-v3'
import { sidebarDataMock } from '@/ui/packages/Sidebar/mock';

const props = withDefaults(defineProps<{
    date?: string,
    like?: number,
    read?: number,
    comment?: number,
    content?: string,
}>(), {
    date: '2021-08-08',
    like: 0,
    read: 0,
    comment: 0,
    content: `asdasdasdasdasd`,
})

</script>

<style scoped lang="less">
@import '../ui/styles/_variables.less';

.article {
    border-top: solid 1px @border;
    margin-top: 90px;
    display: flex;

    .left {
        width: 300px;
    }

    .right {
        flex: 1;

    }

    .preview {
        width: 70%;
        padding: 0 20px;
        margin: 20px auto;
        transform: translateX(-60px);
    }
}
</style>